                                                        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房屋管理</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <!--    <script src="js/axios-interceptor.js"></script>-->
    <link rel="stylesheet" href="../css/index.css"/>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: "Helvetica Neue", Arial, sans-serif;
            background: #f4f6f9;
        }

        .search-container {
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: center;
        }

        .search-container .el-form-item {
            margin: 0;
        }

        .table-container {
            background: #fff;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }

        .pagination-container {
            margin-top: 15px;
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 搜索区域 -->
    <el-form :inline="true" class="search-container">
        <el-form-item label="房屋编号">
            <el-input v-model="searchForm.houseNo" placeholder="请输入房屋编号" clearable></el-input>
        </el-form-item>

        <el-form-item label="入住时间">
            <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"></el-date-picker>
        </el-form-item>

        <el-form-item label="房屋状态">
            <el-select v-model="searchForm.state" placeholder="请选择状态" clearable>
                <el-option v-for="s in states" :label="s.stateName" :value="s.stateId"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="业主">
            <el-select v-model="searchForm.ownerId" placeholder="请选择业主" clearable>
                <el-option v-for="o in owners" :label="o.name" :value="o.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="handleReset">重置</el-button>
            <el-button type="success" @click="handleAdd">新增房屋</el-button>
            <el-button type="warning" @click="handleExport">导出Excel</el-button>
        </el-form-item>
    </el-form>

    <!-- 表格 -->
    <div class="table-container">
        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column prop="id" label="编号" width="80"></el-table-column>
            <el-table-column prop="houseNo" label="房号" width="100"></el-table-column>
            <el-table-column prop="floor" label="楼层" width="80"></el-table-column>
            <el-table-column prop="area" label="面积(㎡)" width="100"></el-table-column>
            <el-table-column prop="liveTime" label="入住时间" :formatter="formatTime" width="150"></el-table-column>
            <el-table-column prop="state" label="房间状态" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.state==1" class="ml-2" type="success">已入住</el-tag>
                    <el-tag v-if="scope.row.state==0" class="ml-2" type="error">未入住</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="building.buildingName" label="楼名" width="120"></el-table-column>
            <el-table-column prop="building.location" label="单元" width="80"></el-table-column>
            <el-table-column prop="owner.name" label="姓名" width="100">
                <template #default="scope">
                    <el-tag v-if="scope.row.owner===null" class="ml-2" type="success">空置</el-tag>
                    <el-tag v-else class="ml-2" type="error">{{scope.row.owner.name}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="owner.telephone" label="电话" width="150">
                <template #default="scope">
                    <el-tag v-if="scope.row.owner===null" class="ml-2" type="success">无</el-tag>
                    <el-tag v-else class="ml-2" type="error">{{scope.row.owner.telephone}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    v-model:page-size="pageSize"
                    v-model:current-page="currentPage"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"></el-pagination>
        </div>
    </div>
<!--    <el-dialog v-model="dialogVisible" :title="form.id ? '编辑房屋' : '新增房屋'" width="50%">-->
<!--        <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">-->
<!--            <el-form-item label="房号" prop="name">-->
<!--                <el-input v-model="form.name" placeholder="请输入房号"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="楼层" prop="name">-->
<!--                <el-input v-model="form.name" placeholder="请输入楼层"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="入住时间" prop="name">-->
<!--                <el-input v-model="form.name" placeholder="选择日期"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="面积" prop="name">-->
<!--                <el-input v-model="form.name" placeholder="请输入面积"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="房间状态" prop="status">-->
<!--                <el-select-->
<!--                        v-model="form.status"-->
<!--                        placeholder="请选择房间状态"-->
<!--                        style="width: 100%">-->
<!--                    <el-option label="空置" value="0"></el-option>-->
<!--                    <el-option label="已入住" value="1"></el-option>-->
<!--                    <el-option label="维修中" value="2"></el-option>-->
<!--                </el-select>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="所属楼" prop="buildingId">-->
<!--                <el-select-->
<!--                        v-model="form.buildingId"-->
<!--                        placeholder="请选择所属楼"-->
<!--                        style="width: 100%">-->
<!--                    <el-option-->
<!--                            v-for="building in buildings"-->
<!--                            :key="building.id"-->
<!--                            :label="building.buildingName"-->
<!--                            :value="building.id">-->
<!--                    </el-option>-->
<!--                </el-select>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="备注">-->
<!--                <el-input-->
<!--                        v-model="form.remark"-->
<!--                        type="textarea"-->
<!--                        :rows="3"-->
<!--                        placeholder="请输入备注信息"></el-input>-->
<!--            </el-form-item>-->
<!--        </el-form>-->

<!--        <template #footer>-->
<!--            <el-button @click="dialogVisible = false">取消</el-button>-->
<!--            <el-button type="primary" @click="addNewOwner">保存</el-button>-->
<!--        </template>-->
<!--    </el-dialog>-->
</div>

<script>
    const {createApp, ref, reactive, onMounted} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    const app = createApp({

        setup() {
            const searchForm = ref({});
            const dateRange = ref([]);

            const tableData = ref([]);

            const dialogVisible = ref(false);
            const total = ref(1);
            const pageSize = ref(10);
            const currentPage = ref(1);

            //搜索
            const handleSearch = () => {
                searchForm.value.start = dateRange.value[0];
                searchForm.value.end = dateRange.value[1];
                getAllHouse()
            };

            const handleReset = () => {
                searchForm.houseNo = '';
                searchForm.dateRange = [];
                searchForm.status = '';
                searchForm.owner = '';
            };
            //查询
            const getAllHouse = () =>{
                axios.post(`/house/${currentPage.value}/${pageSize.value}`,searchForm.value)
                    .then(resp => {
                        tableData.value = resp.data.data.data;
                        total.value = resp.data.data.total;
                    })
            }

            const handleAdd = () => {
                dialogVisible.value = true;
            };

            const handleExport = () => {
                alert("导出Excel");
            };

            const handleEdit = (row) => {
                console.log("编辑:", row);
            };

            const handleDelete = (row) => {
                console.log("删除:", row);
            };

            const handleSizeChange = (val) => {
                currentPage.value = val;
                getAllHouse();
            };

            const handlePageChange = (val) => {
                pageSize.value = val;
                getAllHouse();
            };
            //格式日期
            const formatTime = (row,colum,cellValue,index) => {
                let d = new Date(cellValue);
                return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
            }

            const owners = ref([])
            const initOwnerSelect = ()=>{
                axios.get("/owner/getOwnerNameAnId").then((resp) => {
                    owners.value = resp.data.data
                })
            }
            const states = ref([])
            const initStateSelect = ()=>{
                axios.get("/house/getHouseAnState").then((resp) => {
                    states.value = resp.data.data
                })
            }
            onMounted(() => {
                getAllHouse()
                initStateSelect()
                initOwnerSelect()
            })

            return {
                searchForm,dialogVisible,getAllHouse,
                tableData,formatTime,dateRange,
                total,owners,states,
                pageSize,
                currentPage,
                handleSearch,
                handleReset,
                handleAdd,
                handleExport,
                handleEdit,
                handleDelete,
                handleSizeChange,
                handlePageChange
            };
        }
    });
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 注册 Element Plus 图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app");
</script>
</body>
</html>